<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>高校师资网</title>
    <script src="./libs/flexible.js"></script>

    <link rel="stylesheet" href="./style.css?v=1.0.4">
</head>

<body>
    <div class="container">
        <div class="header">高校师资网</div>
        <!-- banner -->
        <div class="banner"></div>
        <!--  title -->
        <div class="title-wrap">
            <a class="logo">
                <img src="./imgs/logo.jpg" alt="">
            </a>
            <div class="title">
                <!-- 企业简介 -->
                <!-- <h3>深圳北理莫斯科大学</h3>
                <div class="desc">
                    <span>事业单位</span>
                    <span>10000人以上</span>
                    <span>教育培训</span>
                </div> -->
            </div>
        </div>
        <!-- 标签页 -->
        <div class="tabs-nav">
            <div key="0">院校介绍</div>
            <div key="1">招聘公告
                <span class="badge">9</span>
            </div>
            <div key="2" class="active">职位列表
                <span class="badge badge3">0</span>
            </div>
        </div>
        <div class="tab tab1">
            <!-- 企业介绍 -->
        </div>
        <div class="tab tab2">
            招聘公告
        </div>
        <div class="tab tab3">
            <!-- 招聘职位: 通过数据接口获取数据 -->
        </div>

    </div>
    <div class="circle">生成海报</div>
    <script src="./libs/axios.min.js"></script>
    <script>
        const tabsNav = document.querySelector('.tabs-nav');
        const tabs = document.querySelectorAll('.tab');
        const tab1 = document.querySelector('.tab1');
        const title = document.querySelector('.title');
        const banner = document.querySelector('.banner');
        const badge3 = document.querySelector('.badge3')
        // 招聘职位列表容器
        const list = document.querySelector('.tab3');
        let page = 1;
        let size = 10;
        // 公司id
        let companyId = 658;

        // 请求公司信息
        getCompanyInfo();
        // 请求招聘职位信息
        getJobList(page, size);


        // scroll事件处理函数
        const handler = () => {
            // 获取父容器底部距离页面顶部的距离
            const {
                bottom
            } = list.getBoundingClientRect();
            if (bottom - window.innerHeight <= 20) {
                page++;
                // 请求下一页数据
                getJobList(page, size);
            }
        }
        window.addEventListener('scroll', debounce(handler));

        //  请求招聘职位数据
        // company_id=658
        function getJobList(page, size) {
            const url = `https://job.gxszw.com/v1_0/home/job/index?page=${page}&pagesize=${size}`
            axios.get(url).then(({
                data
            }) => {
                if (data.code === 200) {
                    if (!data.data.items || data.data.items.length === 0) {
                        return alert('暂无更多数据');
                    }
                    data.data.items.forEach(item => {
                        const div = document.createElement('div');
                        div.classList.add('tab-item');
                        const tags = item.tag.map(item => `<span class="tag">${item}</span>`).join('');
                        div.innerHTML = `   
                            <div class="left">
                                <h3>${item.jobname}</h3>
                                <div class="desc">
                                    <span>${item.education_text}</span>
                                    <span>${item.experience_text}</span>
                                    <span>${item.district_text}</span>
                                </div>
                                <div class="desc2">
                                ${tags}
                                </div>
                            </div>
                            <div class="right">
                                ${item.wage_text}
                                <div class="time">刚刚</div>
                            </div>
                        `;
                        list.appendChild(div);

                    });
                    // 更新招聘职位数量
                    badge3.innerHTML = parseInt(badge3.innerHTML) + data.data.items.length;

                }
            });
        }

        // 获取企业信息
        function getCompanyInfo() {
            const url = `https://job.gxszw.com/v1_0/home/company/show?id=${companyId}`;
            axios.get(url).then(({
                data
            }) => {
                if (data.code === 200) {
                    const {
                        companyname,
                        nature_text,
                        scale_text,
                        trade_text,
                        content
                    } = data.data.base_info;
                    const {
                        img_src
                    } = data.data.img_list[1];
                    const html = `<h3>${companyname}</h3>
                        <div class="desc">
                            <span>${nature_text}</span>
                            <span>${scale_text}</span>
                            <span>${trade_text}</span>
                        </div>`;
                    title.innerHTML = html;
                    // 企业介绍
                    tab1.innerHTML = `${content}`;
                    // banner
                    const img =
                        banner.style.setProperty('background-image', `url(${img_src}) `)
                }
            });
        }

        // 标签页切换
        tabsNav.addEventListener('click', function (e) {
            // 显示当前标签页
            const index = e.target.getAttribute('key');
            if (!index) {
                return false;
            }

            // 移除之前的高亮样式
            for (let item of tabsNav.children) {
                item.classList.remove('active');
            }
            // 隐藏其他标签页
            for (let item of tabs) {
                item.style.setProperty('display', 'none');
            }
            // 添加高亮样式
            e.target.classList.add('active');

            tabs[index].style.setProperty('display', 'block');
        });


        // 防抖函数
        // handler: 要执行的回调函数
        // delay: 延迟时间, 单位ms
        function debounce(handler, delay = 200) {
            // 记录定时器id, 方便移除未执行的定时器
            let timeId;
            return function () {
                // 保存this指向
                let context = this;
                // 事件处理函数参数
                let args = arguments;
                // 先移除之前的延时定时器
                timeId > 0 && clearTimeout(timeId);
                timeId = setTimeout(() => {
                    handler.apply(context, args);
                }, delay);
            }
        }
    </script>
</body>

</html>